<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/meringerTemplate.xhtml">
	<ui:define name="content">
		<h:form>
			<p:panel id="panel" header="New Person" style="margin-bottom:10px;">
				<p:messages />
				<h:panelGrid columns="1" id="matchGrid">

					<h:outputLabel for="username" value="Username *" />
					<p:inputText id="username" required="true"
						requiredMessage="Username can not be empty"
						value="#{registerBean.username}">
						<!-- <f:validateLength minimum="2" /> -->
						<!-- <p:ajax update="msgUsername" event="keyup" /> -->
					</p:inputText>
					<!-- <p:message for="username" id="msgUsername" display="icon" /> -->
					<span> Real Name: </span>
					<br />
					<p:inputText id="realname" required="true"
						requiredMessage="Real name can not be empty"
						value="#{registerBean.realname}">
					</p:inputText>
					<span> Password: </span>
					<br />
					<p:password id="password" required="true"
						requiredMessage="Password can not be empty"
						validatorMessage="Password must be more than 6 characters and contains at least one upper, lower case letters and one digit."
						value="#{registerBean.password}" match="conf_password">
						<f:validateRegex pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16})"></f:validateRegex>
					</p:password>
					<span> Confirm Password: </span>
					<br />
					<p:password id="conf_password" required="true"
						requiredMessage="Confirmation password can not be empty"
						validatorMessage="Please re-enter password" 
						value="#{registerBean.password}">
					</p:password>
					<span> Age : </span>
					<br />
					<p:inputText id="age" required="true" value="#{registerBean.age}"
						requiredMessage="Age can not be null"
						converterMessage="Age can be only integer">
						<f:convertNumber integerOnly="true" />
					</p:inputText>
				</h:panelGrid>
			</p:panel>
			<p:commandButton id="btn" value="Save"
				action="#{registerBean.savePerson}" update="panel">
			</p:commandButton>
		</h:form>
	</ui:define>
</ui:composition>


</html>
